// 登录页脚本
new Vue({
  el: '#app',
  data() {
    // 确认密码验证规则
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };
    
    return {
      // 当前激活的标签页
      activeTab: 'login',
      
      // 记住我选项
      rememberMe: false,
      
      // 登录表单数据
      loginForm: {
        account: '',
        password: ''
      },
      
      // 登录表单验证规则
      loginRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      
      // 注册表单数据
      registerForm: {
        account: '',
        name: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      
      // 注册表单验证规则
      registerRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    // 检查是否有记住的登录信息
    this.checkRememberedLogin();
  },
  methods: {
    // 标签页切换事件
    handleTabClick(tab) {
      console.log('切换到标签页:', tab.name);
    },
    
    // 检查记住的登录信息
    checkRememberedLogin() {
      const rememberedAccount = localStorage.getItem('rememberedAccount');
      const rememberedPassword = localStorage.getItem('rememberedPassword');
      
      if (rememberedAccount && rememberedPassword) {
        this.loginForm.account = rememberedAccount;
        this.loginForm.password = rememberedPassword;
        this.rememberMe = true;
      }
    },
    
    // 提交登录
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 模拟登录请求
          // 实际应用中应该调用后端API
          console.log('登录表单提交:', this.loginForm);
          
          // 保存记住的登录信息
          if (this.rememberMe) {
            localStorage.setItem('rememberedAccount', this.loginForm.account);
            localStorage.setItem('rememberedPassword', this.loginForm.password);
          } else {
            localStorage.removeItem('rememberedAccount');
            localStorage.removeItem('rememberedPassword');
          }
          
          // 显示成功消息
          this.$message({
            type: 'success',
            message: '登录成功!'
          });
          
          // 跳转到首页
          setTimeout(() => {
            window.location.href = './index.html';
          }, 1000);
        } else {
          console.log('登录表单验证失败');
          return false;
        }
      });
    },
    
    // 提交注册
    submitRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 模拟注册请求
          // 实际应用中应该调用后端API
          console.log('注册表单提交:', this.registerForm);
          
          // 显示成功消息
          this.$message({
            type: 'success',
            message: '注册成功!'
          });
          
          // 切换到登录标签页
          this.activeTab = 'login';
          
          // 设置注册的账号和密码到登录表单
          this.loginForm.account = this.registerForm.account;
          this.loginForm.password = this.registerForm.password;
        } else {
          console.log('注册表单验证失败');
          return false;
        }
      });
    },
    
    // 忘记密码
    forgotPassword() {
      this.$alert('请联系系统管理员重置密码', '忘记密码', {
        confirmButtonText: '确定'
      });
    }
  }
}); 